<template>
	<div class="main-panel">
	    <div class="content">
	        <div class="container-fluid">
	            <ol class="breadcrumb" style="margin-bottom:8px;position:relative;">
	                <li>首页</li>
	                <li>活动管理</li>
	                <li>活动统计</li>
	                <li class="active">活动报表</li>
	                <div class="info-box">
	                    <span>活动名称: 红包雨</span>
	                    <span>活动类型: 签到</span>
	                </div>
	            </ol>
	            <div class="mini-charts">
	                <div class="row">
	                    <div class="col-sm-12 col-md-4">
	                        <div class="mini-charts-item">
	                            <div class="clearfix">
	                                <div class="count abc">
	                                    <small class="text-s1">活动数据</small>
	                                    <hr>
	                                    <small class="text-s2">新增参与次数</small>
	                                    <small class="text-s1">累计活动次数: 0</small>
	                                    <div class="big-num">0</div>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="col-sm-12 col-md-4">
	                        <div class="mini-charts-item">
	                            <div class="clearfix">
	                                <div class="count abc">
	                                    <small class="text-s1">用户数据</small>
	                                    <hr>
	                                    <small class="text-s2">新增参与人数</small>
	                                    <small class="text-s1">累计活动人数: 0</small>
	                                    <div class="big-num">0</div>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="col-sm-12 col-md-4">
	                        <div class="mini-charts-item">
	                            <div class="clearfix">
	                                <div class="count abc">
	                                    <small class="text-s1">奖品数据</small>
	                                    <hr>
	                                    <small class="text-s2">成功兑奖人数</small>
	                                    <small class="text-s1" style="color:#0099FF">处理中奖信息</small>
	                                    <div class="big-num">0</div>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	            <div class="card" id="cardBox">
	                <ul class="nav nav-pills" style="padding:20px 30px;">
	                    <li data-type="0" class="active"><a>活动数据</a></li>
	                    <li data-type="1"><a>用户数据</a></li>
	                    <li data-type="2"><a>奖品数据</a></li>
	                </ul>
	                <div id="cardWrap">
	                    <div class="swiper-box sb1">
	                        <div class="content">
	                            <div>
	                                <div class="chartbox1">
	                                    <div class="chartboxitem" id="trans-box"></div>
	                                    <div class="chartboxitem" id="person-num-box"></div>
	                                </div>
	                                <div id="trendbox1">
	                                    <div class="trend-item">
	                                        <div class="trend-left">
	                                            <p>432</p>
	                                            <div class="trend-left-name">打开人数</div>
	                                        </div>
	                                        <div class="trend-right up">100%</div>
	                                    </div>
	                                    <div class="trend-item">
	                                        <div class="trend-left">
	                                            <p>123</p>
	                                            <div class="trend-left-name">参与人数</div>
	                                        </div>
	                                        <div class="trend-right down">46%</div>
	                                    </div>
	                                    <div class="trend-item">
	                                        <div class="trend-left">
	                                            <p>13</p>
	                                            <div class="trend-left-name">分享人数</div>
	                                        </div>
	                                        <div class="trend-right up">100%</div>
	                                    </div>
	                                </div>
	                            </div>
	                            <div class="header">
	                                <div style="width:10%;display:inline-block;"><input type='text' class='form-control selectData' id='selectData' value="2018-05-22"></div>
	                                至
	                                <div style="width:10%;display:inline-block;"><input type='text' class='form-control selectData' id='selectData' value="2018-05-22"></div>
	                                <span>导出excel表</span>
	                            </div>
	                            <table class="table">
	                                <thead>
	                                <th data-field="name" data-sortable="false">日期</th>
	                                <th data-field="created_at" data-sortable="true">打开数</th>
	                                <th data-field="model.name" data-sortable="true">参与数</th>
	                                <th data-field="startTime" data-sortable="true">分享数</th>
	                                </thead>
	                                <tbody>
	                                <tr>
	                                    <td>2018-03-03</td>
	                                    <td>3</td>
	                                    <td>3</td>
	                                    <td>3</td>
	                                </tr>
	                                <tr>
	                                    <td>2018-03-03</td>
	                                    <td>3</td>
	                                    <td>3</td>
	                                    <td>3</td>
	                                </tr>
	                                <tr>
	                                    <td>2018-03-03</td>
	                                    <td>3</td>
	                                    <td>3</td>
	                                    <td>3</td>
	                                </tr>
	                                </tbody>
	                            </table>
	                        </div>
	                    </div>
	                    <div class="swiper-box sb2">
	                        <div class="content">
	                            <div>
	                                <div class="chartbox1">
	                                    <div class="chartboxitem" id="sex-box"></div>
	                                    <div class="chartboxitem" id="map-box"></div>
	                                </div>
	                            </div>
	                            <div class="header">用户属性<span>导出excel表</span></div>
	                            <table id="bootstrap-table-container" class="table">
	                                <thead>
	                                <th data-sortable="false">性别</th>
	                                <th data-sortable="false">人数</th>
	                                <th data-sortable="false">比例</th>
	                                </thead>
	                                <tbody>
	                                <tr>
	                                    <td>3</td>
	                                    <td>3</td>
	                                    <td>3</td>
	                                </tr>
	                                <tr>
	                                    <td>3</td>
	                                    <td>3</td>
	                                    <td>3</td>
	                                </tr>
	                                </tbody>
	                            </table>
	                        </div>
	                    </div>
	                    <div class="swiper-box sb3">
	                        <div class="content">
	                            <div class="header">中奖信息<span>处理中奖信息</span><span style="margin-right:30px;">导出excel表</span></div>
	                            <div class="lottery-box">
	                                <div class="lottery-item">
	                                    <div class="lottery-num">5</div>
	                                    <div class="lottery-name">未中奖</div>
	                                </div>
	                                <div class="lottery-item">
	                                    <div class="lottery-num">5</div>
	                                    <div class="lottery-name">未兑奖</div>
	                                </div>
	                                <div class="lottery-item">
	                                    <div class="lottery-num">5</div>
	                                    <div class="lottery-name">兑奖成功</div>
	                                </div>
	                                <div class="lottery-item">
	                                    <div class="lottery-num">5</div>
	                                    <div class="lottery-name">兑奖失败</div>
	                                </div>
	                            </div>
	                            <div class="header">奖品消耗<span>导出excel表</span></div>
	                            <table id="bootstrap-table-container" class="table">
	                                <thead>
	                                <th data-field="name" data-sortable="false">奖品名称</th>
	                                <th data-field="created_at" data-sortable="true">添加总数</th>
	                                <th data-field="model.name" data-sortable="true">兑奖成功</th>
	                                <th data-field="startTime" data-sortable="true">兑奖失败</th>
	                                <th data-field="startTime" data-sortable="true">未兑奖</th>
	                                <th data-field="startTime" data-sortable="true">奖品剩余</th>
	                                </thead>
	                                <tbody>
	                                <tr>
	                                    <td>iphoneX</td>
	                                    <td>4</td>
	                                    <td>3</td>
	                                    <td>3</td>
	                                    <td>3</td>
	                                    <td>5</td>
	                                </tr>
	                                </tbody>
	                            </table>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
</template>
<script>
	$(document).ready(function () {
	    $('.nav-pills li').on('click', function () {
	        var $this = $(this);
	        if ($this.hasClass('active'))return;
	        var type = $this.data('type');
	        $('#cardWrap').css('left',-100*type+'%');
	        $this.siblings('li').removeClass('active');
	        $this.addClass('active');
	    });

	    $('#selectData').datepicker({
	        autoclose: true, //自动关闭
	        beforeShowDay: $.noop,    //在显示日期之前调用的函数
	        calendarWeeks: false,     //是否显示今年是第几周
	        clearBtn: false,          //显示清除按钮
	        daysOfWeekDisabled: [],   //星期几不可选
	        endDate: Infinity,        //日历结束日期
	        forceParse: true,         //是否强制转换不符合格式的字符串
	        format: 'yyyy-mm-dd',     //日期格式
	        keyboardNavigation: true, //是否显示箭头导航
	        language: 'cn',           //语言
	        minViewMode: 0,
	        orientation: "auto",      //方向
	        rtl: false,
	        startDate: -Infinity,     //日历开始日期
	        startView: 0,             //开始显示
	        todayBtn: false,          //今天按钮
	        todayHighlight: false,    //今天高亮
	        weekStart: 0              //星期几是开始
	    });

	    var transChart = echarts.init(document.getElementById('trans-box'));
	    transOption = {
	        title : {
	            text: '漏斗图'
	        },
	        legend: {
	            data : ['打开','参与','分享']
	        },
	        calculable : true,
	        series : [
	            {
	                name:'漏斗图',
	                type:'funnel',
	                width: '40%',
	                data:[
	                    {value:60, name:'参与'},
	                    {value:30, name:'分享'},
	                    {value:90, name:'打开'}
	                ]
	            }
	        ]
	    };
	    transChart.setOption(transOption);

	    var personChart = echarts.init(document.getElementById('person-num-box'));
	    personOption = {
	        title : {
	            text: '2018-04-02至2018-04-02数据',
	        },
	        legend: {
	            data:['人数', '次数', '人均次数'],
	            x: 'right'
	        },
	        calculable : true,
	        xAxis : [
	            {
	                type : 'category',
	                data : ['2018-04-02']
	            }
	        ],
	        yAxis : [
	            {
	                type : 'value'
	            }
	        ],
	        series : [
	            {
	                name:'人数',
	                type:'bar',
	                data:[5.0]
	            },
	            {
	                name:'次数',
	                type:'bar',
	                data:[4.0]
	            },
	            {
	                name:'人均次数',
	                type:'bar',
	                data:[3.0]
	            }
	        ]
	    };
	    personChart.setOption(personOption);

	    var sexChart = echarts.init(document.getElementById('sex-box'));
	    sexOption = {
	        title : {
	            text: '性别比例'
	        },
	        legend: {
	            orient : 'vertical',
	            x : 'left',
	            y : 'center',
	            data:['男','女']
	        },
	        calculable : true,
	        series : [
	            {
	                name:'访问来源',
	                type:'pie',
	                radius : ['50%', '70%'],
	                itemStyle : {
	                    normal : {
	                        label : {
	                            show : false
	                        },
	                        labelLine : {
	                            show : false
	                        }
	                    },
	                    emphasis : {
	                        label : {
	                            show : true,
	                            position : 'center',
	                            textStyle : {
	                                fontSize : '30',
	                                fontWeight : 'bold'
	                            }
	                        }
	                    }
	                },
	                data:[
	                    {value:335, name:'男'},
	                    {value:310, name:'女'}
	                ]
	            }
	        ]
	    };
	    sexChart.setOption(sexOption);

	    var mapChart = echarts.init(document.getElementById('map-box'));
	    mapOption = {
	        title : {
	            text: '地域分析'
	        },
	        tooltip : {
	            trigger: 'item'
	        },
	        dataRange: {
	            orient: 'horizontal',
	            min: 0,
	            max: 55000,
	            text:['高','低'],           // 文本，默认为数值文本
	            splitNumber:0
	        },
	        toolbox: {
	            show : true,
	            orient: 'vertical',
	            x:'right',
	            y:'center',
	            feature : {
	                mark : {show: true},
	                dataView : {show: true, readOnly: false}
	            }
	        },
	        series : [
	            {
	                name: '2011全国GDP分布',
	                type: 'map',
	                mapType: 'china',
	                mapLocation: {
	                    x: 'left'
	                },
	                selectedMode : 'multiple',
	                itemStyle:{
	                    normal:{label:{show:true}},
	                    emphasis:{label:{show:true}}
	                },
	                data:[
	                    {name:'西藏', value:605.83},
	                    {name:'青海', value:1670.44},
	                    {name:'宁夏', value:2102.21},
	                    {name:'海南', value:2522.66},
	                    {name:'甘肃', value:5020.37},
	                    {name:'贵州', value:5701.84},
	                    {name:'新疆', value:6610.05},
	                    {name:'云南', value:8893.12},
	                    {name:'重庆', value:10011.37},
	                    {name:'吉林', value:10568.83},
	                    {name:'山西', value:11237.55},
	                    {name:'天津', value:11307.28},
	                    {name:'江西', value:11702.82},
	                    {name:'广西', value:11720.87},
	                    {name:'陕西', value:12512.3},
	                    {name:'黑龙江', value:12582},
	                    {name:'内蒙古', value:14359.88},
	                    {name:'安徽', value:15300.65},
	                    {name:'北京', value:16251.93, selected:true},
	                    {name:'福建', value:17560.18},
	                    {name:'上海', value:19195.69, selected:true},
	                    {name:'湖北', value:19632.26},
	                    {name:'湖南', value:19669.56},
	                    {name:'四川', value:21026.68},
	                    {name:'辽宁', value:22226.7},
	                    {name:'河北', value:24515.76},
	                    {name:'河南', value:26931.03},
	                    {name:'浙江', value:32318.85},
	                    {name:'山东', value:45361.85},
	                    {name:'江苏', value:49110.27},
	                    {name:'广东', value:53210.28, selected:true}
	                ]
	            }
	        ]
	    };
	    mapChart.setOption(mapOption);
	});
</script>
<style scoped>
	*, :after, :before {
	    box-sizing: border-box;
	}

	.modal-width900 {
	    width: 900px;
	    height: auto;
	    overflow: hidden;
	    position: relative;
	}
	.modal-width900 .qrcode-img {
	    width: 210px;
	    height: 210px;
	}
	.modal-width900 .qrcode-link {
	    width: 210px;
	    height: auto;
	    overflow: hidden;
	}
	body .pos-relative {
	    position: relative;
	}
	.modal-width900 .btn-red {
	    width: 50px;
	    height: 40px;
	    display: block;
	    border-radius: 0;
	    background-color: #ec5463;
	    border: 0;
	    position: absolute;
	    right: 0;
	    outline: 0!important;
	    box-shadow: none!important;
	    z-index: 1;
	}
	.modal-width900 .modal-body .qrcode-right {
	    width: 250px;
	    height: auto;
	    overflow: hidden;
	}
	.form-style1 .form-control {
	    border-radius: 0;
	    background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	}
	.color-white {
	    color: #fff;
	}
	.btn-red {
	    width: 80px;
	    height: 26px;
	    display: block;
	    border-radius: 15px;
	    background-color: #ec5463;
	    border: 0;
	    line-height: 26px;
	}
	body .border-ef {
	    border: 1px solid #efefef;
	}
	.pd10 {
	    padding: 10px;
	}
	.modal-appScene {
	    width: 870px;
	    margin: 100px auto;
	}

	.scene-app {
	    display: inline-block;
	    background-image: url(/images/admin/scene_app.png);
	    background-repeat: no-repeat;
	    overflow: hidden;
	}
	.scene-app01 {
	    width: 183px;
	    height: 133px;
	    background-position: -2px -2px;
	}
	.scene-app02 {
	    width: 181px;
	    height: 132px;
	    background-position: -2px -137px;
	}
	.scene-app03 {
	    width: 181px;
	    height: 131px;
	    background-position: -2px -271px;
	}
	.scene-a {
	    width: 24px;
	    height: 24px;
	    background-position: -187px -28px;
	}
	.scene-b {
	    background-position: -213px -2px;
	}
	.scene-c {
	    background-position: -187px -2px;
	}
	.scene-b, .scene-c {
	    width: 24px;
	    height: 24px;
	}
	.pl30 {
	    padding-left: 30px;
	}
	.pb20 {
	    padding-bottom: 20px;
	}
	.pl6 {
	    padding-left: 6px;
	}
	.pt5 {
	    padding-top: 5px;
	}
	.ml43 {
	    margin-left: 43px;
	}
	.modal-appScene .modal-body .text-container {
	    width: 144px;
	    margin: 10px auto;
	}
	body .box-center {
	    margin: 0 auto!important;
	}
	.pt25 {
	    padding-top: 25px;
	}

	.mini-charts-item {
	    position: relative;
	    margin-bottom: 30px;
	    background-color: #2b343a;
	}
	.mini-charts-item:before {
	    -webkit-transition: width;
	    -o-transition: width;
	    transition: width;
	    -webkit-transition-duration: .5s;
	    transition-duration: .5s;
	    -webkit-backface-visibility: hidden;
	    -moz-backface-visibility: hidden;
	    backface-visibility: hidden;
	    content: "";
	    width: 105px;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    top: 0;
	}
	.mini-charts-item .chart {
	    padding: 19px;
	    float: left;
	}
	.mini-charts-item .count {
	    overflow: hidden;
	    color: rgba(255,255,255,.9);
	    padding: 16px 12px;
	}
	.mini-charts-item .count>small {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.mini-charts-item .count>h2, .mini-charts-item .count>small {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.mini-charts-item .count>h2 {
	    margin: 0;
	    line-height: 100%;
	    font-size: 22px;
	    font-weight: 300;
	}
	.mini-charts-item {
	    box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}

	*, :active, :focus, :hover {
	    outline: 0!important;
	    -webkit-tap-highlight-color: transparent!important;
	}
	.pl40 {
	    padding-left: 40px;
	}
	.abc{
	    position:relative;
	}
	.text-s1{
	    line-height: 1.2;
	    font-size: 14px;
	}
	hr{
	    margin-top:10px;
	}
	.text-s2{
	    line-height: 1.2;
	    font-size: 14px;
	    display: block;
	    margin-bottom:50px;
	}
	.big-num{
	    font-size: 50px;
	    position: absolute;
	    bottom:30px;
	    right:40px;
	}
	.info-box{
	    display: inline-block;
	    margin-left: 60px;
	}
	.info-box span{
	    padding:0 40px;
	    border-left:1px solid #333333;
	}
	.chartbox1{
	    padding:30px;
	    height: 500px;
	}
	.chartboxitem{
	    float: left;
	    width:50%;
	    height: 100%;
	}
	#trendbox1{
	    height: 80px;
	    margin: 30px 0;
	    position: relative;
	}
	.trend-item{
	    height: 100%;
	    background: #2b343a;
	    color:#ffffff;
	    float:left;
	    width:32.6%;
	    position: relative;
	}
	#trendbox1 .trend-item:nth-child(2){
	    float:none;
	    position: absolute;
	    top:0;
	    left:0;
	    right:0;
	    bottom:0;
	    margin: auto;
	}
	#trendbox1 .trend-item:last-child{
	    float:right;
	}
	.trend-item:before{
	    content:'';
	    width:1px;
	    height: 80%;
	    background: #ffffff;
	    position: absolute;
	    top:0;
	    left:0;
	    right:0;
	    bottom:0;
	    margin: auto;
	}
	.trend-left{
	    width:50%;
	    float:left;
	    text-align: right;
	    box-sizing: border-box;
	    padding-right:3%;
	}
	.trend-left p{
	    font-weight: bold;
	    line-height:2.4;
	}
	.trend-right{
	    width:50%;
	    float:left;
	    line-height: 80px;
	    box-sizing: border-box;
	    padding-left: 5%;
	    font-weight: bold;
	}
	.up{
	    color:green;
	}
	.up:before{
	    content:'↑';
	    margin-right: 5px;
	}
	.down{
	    color:red;
	}
	.down:before{
	    content:'↓';
	    margin-right: 5px;
	}
	.nav-pills li{
	    cursor:pointer;
	}
	.swiper-box{
	    float:left;
	    width:33.33%;
	}
	.card{
	    overflow: hidden;
	}
	#cardWrap{
	    width:300%;
	    position: relative;
	}
	#cardWrap:after{
	    content:'';
	    display: block;
	    clear:both;
	}
	.lottery-box{
	    width:100%;
	    height: 140px;
	    margin-top: 30px;
	    margin-bottom: 30px;
	}
	.lottery-item{
	    box-sizing: border-box;
	    border:1px solid #333333;
	    text-align: center;
	    width:24%;
	    padding-top:20px;
	    height: 100%;
	}
	.lottery-box .lottery-item:not(last-child){
	    margin-right: 1%;
	    float:left;
	}
	.lottery-num{
	    font-weight: bold;
	    line-height: 50px;
	    font-size: 20px;
	}
	.header span{
	    color:#169BD5;
	    float:right;
	    cursor: pointer;
	    font-size: 14px;
	}
	.chart-box-title{
	    background: #f2f2f2;
	    color:#333333;
	    font-size: 16px;
	}
</style>
